<template>
    <no-ssr>
        <div class="manual-wrap active" @touchmove.prevent v-show="showData">
            <turn :width="manualWidth" ref="turn" :height="manualHeight" :data="manuals">
            </turn>

        </div>
    </no-ssr>
</template>

<script>
import turn from "vue-flip-page";

export default {
    name: '',
    components: {
        turn
    },
    data() {
        return {
            showData: true,
            manualWidth: '375',
            manualHeight: '667',
            manuals: [{ "picture_image": "https://img1.baidu.com/it/u=1147992555,4285883113&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" }, { "picture_image": "https://img1.baidu.com/it/u=1147992555,4285883113&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" }],
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        handleSwitchManual(index) {
            if (index === this.currentIndex) return;
            this.$refs["turn"].toPage(index);
            this.currentIndex = index;
            this.goods_id = this.manuals[this.currentIndex].goods_id;
            this.show = false;
        },

    },
}
</script> 

<style scoped>
.manual-wrap {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-transition: opacity ease 0.5s;
    transition: opacity ease 0.5s;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
}

.manual-wrap.active {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
</style>
